.main {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // padding: 2% 3%;
  }
  .top,
  .bototm {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .p1,
  .p2,
  .bg {
    background-repeat: no-repeat;
  }
  .p1 {
    width: 580px;
    height: 700px;
    background-image: url(../../assets/images/left_box.png);
    .title{
      font-size: 20px;
      margin: 20px 70px;
      color: #03e6e6;
    }
    .list{
      width: 400px;
      height: 35px;
      margin: 30px auto 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background-color: rgba(20, 48, 107, 0.5);
      div {
        color: #03e6e6;
        text-align: center;
      }
      div:nth-of-type(1){
        width: 45px;
      }
      div:nth-of-type(2){
        width: 110px;
      }
      div:nth-of-type(3){
        width: 100px;
      }
    }
  }
  .p2 {
    width: 802px;
    position: relative;
    .c4 {
      bottom: 30px;
      .time {
        color: #27ffff;
        margin-top: 20px;
        // padding-left: 10px;
        text-align: center;
        background-size: 100% 100%;
        background-image: url(../../assets/images/input-bg.png);
      }
    }
    .dec {
      width: 500px;
      display: flex;
      justify-content: space-around;
      .number {
        width: 201px;
        height: 106px;
        background-image: url(../../assets/images/tag.png);
        text-align: center;
        .title {
          background: linear-gradient(180deg, #2079f5 25%, #27ffff 75%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 26px;
          font-weight: 600;
          line-height: 55px;
        }
        .numb {
          font-size: 24px;
          font-weight: 600;
        }
      }
    }
  }
  .c3,
  .c4 {
    position: absolute;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .c1 {
    width: 652px;
    height: 359px;
    background-image: url(../../assets/images/huan.png);
    position: absolute;
    top: 12%;
    z-index: 1;
  }
  .c2 {
    width: 517px;
    height: 517px;
    background-image: url(../../assets/images/cicle.png);
    left: 65px;
    position: absolute;
    animation: roate2 8s infinite linear;
    -webkit-animation: roate2 8s infinite linear;
    z-index: 2;
  }
  .c3 {
    z-index: 3;
    #shouldTotal{
      width: 400px;
      height: 400px;
      margin: 32px auto 0;
    }
  }
  .p3 {
    width: 533px;
    height: 374px;
    background-image: url(../../assets/images/right_box.png);
    .title{
      font-size: 20px;
      padding: 15px 75px;
      color: #03e6e6;
    }
    #departTotal{
      margin: 20px auto 0;
      width: 400px;
      height: 250px;
    }
  }
  .p4 {
    width: 525px;
    height: 303px;
    background-image: url(../../assets/images/right_box2.png);
    margin-top: 30px;
    .title{
      font-size: 20px;
      line-height: 45px;
      text-align: center;
      color: #03e6e6;
    }
    #peopleTotal{
      margin: 20px auto 0;
      width: 500px;
      height: 230px;
    }
  }
  .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{
    position: relative;
  }
  .bototm {
    margin-top: 20px;
    .b1,
    .b8 {
      .bg {
        width: 138px;
        height: 148px;
        background-image: url(../../assets/images/border.png);
      }
    }
    .b8 {
      .bg {
        -webkit-transform: scaleX(-1);
        -moz-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        transform: scaleX(-1);
      }
    }
    .b2,
    .b3,
    .b4 {
      padding-top: 30px;
      position: relative;
      .bg1{
        width: 105px;
        height: 105px;
        background-image: url(../../assets/images/cricle4.png);
        margin: 0 0 0 15px;
        animation: roate1 8s infinite linear;
        -webkit-animation: roate1 8s infinite linear;
        position: absolute;
      }
      .bg2{
        width: 89px;
        height: 92px;
        background-image: url(../../assets/images/cricle3.png);
        margin: 6px 0 0 22px;
        animation: roate2 8s infinite linear;
        -webkit-animation: roate2 8s infinite linear;
        position: absolute;
      }
      .tag{
        margin-top: 120px;
      }
    }
    .b5,
    .b6,
    .b7 {
      .bg {
        width: 104px;
        height: 104px;
        background-image: url(../../assets/images/cricle5.png);
        margin: 30px auto 15px auto;
        animation: roate2 8s infinite linear;
        -webkit-animation: roate2 8s infinite linear;
      }
    }
    .tag {
      width: 144px;
      height: 40px;
      background-image: url(../../assets/images/tag2.png);
      line-height: 30px;
      font-size: 18px;
      text-align: center;
    }
    .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{
      .dec{
        position: absolute;
        transform: translateX(-50%);
        font-size: 28px;
        font-weight: 600;
      }
    }
    .b1{
      .dec{
        top: 28%;
        left: 42%;
      }
    }
    .b2,.b3,.b4{
      .dec{
        top: 32%;
        left: 45%;
      }
    }
    .b5,.b6,.b7{
      .dec{
        top: 32%;
        left: 50%;
      }
    }
    .b8{
      .dec{
        top: 28%;
        left: 52%;
      }
    }
  }
  .temper-scroll {
    height: 500px;
    width: 350px;
    margin: 30px auto;
    overflow: hidden;
    .scroll-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 3px 0;
      font-size: 18px;
    }
  }